import React from "react";
import "antd/dist/antd.css";
// import "./index.css";
import { Comment, Avatar, Form, Button, List, Input } from "antd";
import moment from "moment";
// -----------------------------------------
const TextArea = Input.TextArea;
const CommentList = ({ comments }) => (
  <List
    dataSource={comments}
    header={`${comments.length} ${comments.length > 1 ? "replies" : "reply"}`}
    itemLayout="horizontal"
    renderItem={props => <Comment {...props} />}
  />
);

const Editor = ({ onChange, onSubmit, submitting, value }) => (
  <div>
    <Form.Item>
      <TextArea rows={4} onChange={onChange} value={value} />
    </Form.Item>
    <Form.Item>
      <Button
        htmlType="submit"
        loading={submitting}
        onClick={onSubmit}
        type="primary"
      >
        Add Comment
      </Button>
    </Form.Item>
  </div>
);
// -----------------------------------------

class CommentSub extends React.Component {
  state = {
    comments: [],
    submitting: false,
    value: ""
  };

  handleSubmit = () => {
    if (!this.state.value) {
      return;
    }
    this.setState({
      submitting: true
    });
    setTimeout(() => {
      this.props.subItem(this.state.value);
      this.setState({
        submitting: false,
        value: "",
        comments: [
          {
            author: "visiter",
            content: <p>{this.state.value}</p>,
            datetime: moment().fromNow()
          }
        ]
      });
    }, 1000);
  };
  handleChange = e => {
    this.setState({
      value: e.target.value
    });
  };

  render() {
    const { comments, submitting, value } = this.state;

    return (
      <Comment
        avatar={
          <Avatar
            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            alt="visiter"
          />
        }
        content={
          <Editor
            onChange={this.handleChange}
            onSubmit={this.handleSubmit}
            submitting={submitting}
            value={value}
          />
        }
      />
    );
  }
}

export default CommentSub;
